<template>
  <section class="meChat_ms">
    <Conversation />
    <template v-for="row in conversation">
      <Information :currentDetail="currentDetail" :row="row" :show="(selectSession?.uuid === row?.uuid)" />
    </template>
    <template v-if="(conversation?.length === 0 || !selectSession?.uuid)">
      <DetailPanner>
        <template #main>
          <p class="centerText">
            欢迎使用MeChat
          </p>
        </template>
      </DetailPanner>
    </template>
  </section>
</template>
<script setup>
import { computed, watch } from 'vue';
import Conversation from './Conversation/index.vue'
import Information from './Information/index.vue'
import { db } from "@/config/data";
import { useObservable } from "@vueuse/rxjs";
import { liveQuery } from "dexie";
import { useRequest } from 'vue-hooks-plus';
import { getFriendDetail, getGroupDetail } from '@/server/friend'
import { useStore } from 'vuex'
import DetailPanner from '@/components/DetailPanner.vue';
import { ElMessage } from 'element-plus'
const conversation = useObservable(liveQuery(() => db.conversation?.toArray() || []))
const store = useStore()
const selectSession = computed(() => store.state.selectSession)
const ready = computed(() => !!(selectSession.value && selectSession.value.uuid))
const { data: currentDetail, runAsync } = useRequest(() => {
  return selectSession?.value?.msgCustomType === 0 ? getFriendDetail(selectSession.value.userId) : getGroupDetail(selectSession.value.groupId)
}, {
  ready,
  onSuccess: async res => {
    // 顺便更新一下会话数据库
    if (selectSession.value.msgCustomType === 0) {
      const newData = { ...res }
      const nickName = newData.remark || newData.nickName
      delete res?.nickName
      delete res?.remark
      await db.conversation.where({ uuid: selectSession.value.uuid }).modify({
        nickName,
        ...res
      })
    }
    if (selectSession.value.msgCustomType === 1) {
      await db.conversation.where({ uuid: selectSession.value.uuid }).modify({
        nickName: res.group.name,
        top: res.top,
        disturb: res.set.disturb
      })
      const params = { ...res, ...res.group }
      delete params.user
      delete params.group
      delete params.set
      params.uuid = selectSession.value.uuid
      params.alertSubdivideType = 0 //当成功获取的时候,说明还在群内,有可能退出群又加进来了
      if (res.set.banned === "Y") {
        params.alertSubdivideType = 8
      }
      if (res.group.banned === 'Y') {
        params.alertSubdivideType = 6
      }
      const item = await db.groupInfo.get({ uuid: selectSession.value.uuid })
      if (item) {
        await db.groupInfo.update(item.id, params)
      } else {
        await db.groupInfo.add(params)
      }
    }
  },
  onError: async (err) => {
    if (err?.code === 500 && selectSession.value.msgCustomType === 1 && err?.msg === '你不在当前群中') {
      const item = await db.groupInfo.get({ uuid: selectSession.value.uuid })
      if (item) return await db.groupInfo.update(item.id, { alertSubdivideType: 500 })
      await db.groupInfo.add({ alertSubdivideType: 500, administrator: "N", uuid: selectSession.value.uuid })
      return
    }
    ElMessage({
      type: 'error',
      message: err.msg || '网络连接失败',
      center: true,
    })
  }
})

watch(selectSession, async () => {
  try {
    await runAsync()
  } catch (error) {

  }
  store.commit('saveOpenChecked', false)
})
</script>

<style scoped lang="less">
@import url('./styles.less');

.centerText {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 5px;
}
</style>
